import React from 'react';
import ReactDom from 'react-dom';


import ULMenuList from './ULMenuList.js';

import A from './A.js';
import B from './B.js';
import C from './C.js';
import D from './D.js';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';


let menuList = [
    {id:1,name: 'a'},
    {id:2,name: 'b'},
    {id:3,name: 'c'},
    {id:4,name: 'd'}
];

let Dlink = <Link to='/d'>D</Link>
let DRoute = <Route path='/d' exact component={D}></Route>

ReactDom.render(
    <Router>
        <div className="tabs">
            <div>
                <ULMenuList list={menuList}></ULMenuList>
            </div>
            <nav>
                <Link to='/'>A</Link>
                <Link to='/b'>B</Link>
                <Link to='/c'>C</Link>
                {Dlink}
            </nav>
            <Route path='/' exact component={A}></Route>
            <Route path='/b' exact component={B}></Route>
            <Route path='/c' exact component={C}></Route>
            {DRoute}
        </div>
    </Router>
,document.querySelector('#app'));
